<template>
  <el-container>
    <el-main>
      <el-row class="headSearch">条件检索</el-row>
      <el-row class="rr">
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <el-input prefix-icon="el-icon-search" type="text" placeholder="功能角色名称" v-model="rolesName" clearable/>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
          <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        &nbsp;
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import { selRoles } from '../../../api/system/functionRoles'

  export default {
    name: 'functionRolesForm',
    props: ['pageNum', 'pageSize', 'ranNum'],
    data() {
      return {
        rolesName: '' // 角色名称
      }
    },
    watch: {
      pageNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      },
      ranNum: function(val) {
        this.submitForm()
      }
    },
    methods: {
      submitForm: function() {
        this.$emit('tableLoad', true)
        selRoles(this.rolesName, this.pageNum, this.pageSize).then(res => {
          this.$emit('rolesData', res)
          this.$emit('tableLoad', false)
        })
      },
      resetForm: function() {
        this.rolesName = ''
      }
    }
  }
</script>

<style scoped>
  .el-main{
    padding: 0px;
    margin: 0;
  }
  .headSearch{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }
  .btnSearch1{
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }
  .rr{
    margin-left: 25px;
  }
  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }
  .el-main{
    margin-bottom: 0;
    padding-bottom: 0;
  }
</style>
